<template>
  <f7-page>
    <f7-navbar title="创建订单" back-link="Back"></f7-navbar>
    <f7-list>
      <f7-list-input
        label="名字"
        type="text"
        placeholder="Your name"
        :value="ordername"
        @input="ordername = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="手机号"
        type="text"
        placeholder="Your phone"
        :value="contact"
        @input="contact = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input label="房型" type="text" v-model="houseType" disabled></f7-list-input>
      <f7-list-input label="入住时间" type="text" v-model="checkInDate" disabled></f7-list-input>
      <f7-list-input label="离店时间" type="text" v-model="departDate" disabled></f7-list-input>
    </f7-list>
    <f7-list class="yuding">
      <f7-list-item :title="this.$store.state.apiPrice.Price*this.$store.state.apiData.day">
        <f7-button fill after @click="yuding1">预定</f7-button>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
export default {
  data() {
    return {
      ordername: "",
      contact: ""
    };
  },
  computed: {
    houseType() {
      return this.$store.state.apiPrice.Typepay;
    },
    checkInDate() {
      return this.$store.state.apiData.startdate;
    },
    departDate() {
      return this.$store.state.apiData.enddate;
    }
  },
  mounted() {
    console.log(this.checkInDate);
  },
  methods: {
    yuding1() {
      let apiCreateOrder = {
        ordername: this.ordername,
        ordercontact: this.contact
      };
      this.$store.commit("setCreateOrder", apiCreateOrder);
      this.$f7router.navigate("/pay/");
    }
  }
};
</script>

